@import "@automattic/typography/styles/fonts";

.form-input-validation {
	color: var(--color-success);
	position: relative;
	padding: 6px 24px 11px 0;
	border-radius: 2px;
	box-sizing: border-box;
	font-size: $font-body-small;
	animation: appear 0.3s ease-in-out;
	font-weight: 400;

	&.is-error {
		color: var(--color-error);
	}

	&.is-warning {
		color: var(--color-warning);
	}

	&.has-icon {
		padding-left: 26px;
	}

	&.is-hidden {
		animation: none;
		visibility: hidden;
	}

	&.is-muted {
		color: var(--color-text-subtle);
	}

	.gridicon,
	svg {
		fill: currentcolor;
		float: left;
		margin-left: -26px;
	}
}
